<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<script setup>
import { reactive, ref } from 'vue';
import verifyCode from '@cps/ma-verifyCode/index.vue';
import { useUserStore, useAppStore, useConfigStore } from '@/store';
import { useTagStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import { $request } from '@/utils/request';
//   import { useAppStore,, useMessageStore } from '@/store'
// request({
//   url: 'system/getBingBackgroundImage', timeout: 10000, method: 'get'
// }).then( res => {
//   document.getElementById('background').style.backgroundImage = `url(${res.data.url})`
// })
const configStore = useConfigStore();

const router = useRouter();
const route = useRoute();
const Verify = ref(null);
const appStore = useAppStore();
const loading = ref(false);
const bgImage = ref(null);
const data = ref([
    {
        value: 'zh_CN',
        label: '中文',
        other: 'extra'
    },
    {
        value: 'en',
        label: 'English',
        other: 'extra'
    }
]);
const languageChange = (chenjie) => {
    if (chenjie === 'zh_CN') {
        appStore.toggleI18n(false);
        appStore.changeLanguage('zh_CN');
    } else {
        appStore.toggleI18n(true);
        appStore.changeLanguage('en');
    }
};
let isDevelop = import.meta.env.VITE_APP_ENV === 'development';

var odata = isDevelop
    ? { username: 'lei004', password: '123456', code: '' }
    : { username: '', password: '', code: '' };

const form = reactive(odata);

const userStore = useUserStore();

const redirect = route.query.redirect ? route.query.redirect : '/';

const handleSubmit = async ({ values, errors }) => {
    if (loading.value) {
        return;
    }
    loading.value = true;
    if (!errors) {
        // console.log(Verify.value.checkResult(form.code))
        const result = await userStore.login(form);
        if (!result) {
            loading.value = false;
            return;
        }
        useTagStore().clearTags();
        console.log('===================', redirect);
        router.push(redirect);
    }
    loading.value = false;
};

const getPageInfo = () => {
    $request.get('/cloud/projectConfigSelect/get').then((res) => {
        console.log(res);
        bgImage.value = res.wallpaper;
        console.log(bgImage.value);
    });
};

getPageInfo();
</script>
<template>
    <div
        id="background"
        :style="{ 'background-image': `url(${bgImage})` }"
        class="fixed flex w-full h-full"
    >
        <div class="absolute right-10 top-5 z-50">
            <a-select
                v-model="appStore.language"
                :style="{ width: '94px' }"
                placeholder="Please select ..."
                @change="languageChange"
            >
                <a-option
                    v-for="item of data"
                    :value="item.value"
                    :label="item.label"
                />
            </a-select>
        </div>
        <div class="content-login h-full relative z-20 w-full text-[#fff]">
            <!-- <h2 class="mt-10 text-3xl pb-0 mb-10 text">{{ $t('sys.login.loginBtn') }}</h2>
      <h2 >welcome!</h2> -->
            <div class="w-2/4">
                <div class="pb-16">
                    <!-- <h2 class=" font-extrabold text-[30px] text-[#222222] leading-[30px] text-left pb-[6px]">welcome</h2> -->
                    <p
                        class="text-[24px] text-[#fff] leading-[30px] text-left pb-[6px]"
                    >
                        {{ $t('basics.wel') }}
                    </p>
                    <div class="w-[47px] h-[6px] bg-[#2C6DFF]"></div>
                </div>
                <a-form :model="form" @submit="handleSubmit">
                    <div class="pb-2">{{ $t('basics.zhanghao') }}</div>
                    <a-form-item
                        field="username"
                        :hide-label="true"
                        class="text-[#fff]"
                        :rules="[
                            {
                                required: true,
                                message: $t('sys.login.usernameNotice')
                            }
                        ]"
                    >
                        <a-input
                            v-model="form.username"
                            class="w-full h-[56px] text-[#fff] bg-[transparent] border-[#FFFFFF]"
                            size="large"
                            :placeholder="$t('sys.login.username')"
                            allow-clear
                        >
                            <template #prefix><icon-user /></template>
                        </a-input>
                    </a-form-item>
                    <div class="pb-2">{{ $t('basics.password') }}</div>
                    <a-form-item
                        field="password"
                        :hide-label="true"
                        :rules="[
                            {
                                required: true,
                                message: $t('sys.login.passwordNotice')
                            }
                        ]"
                    >
                        <a-input-password
                            v-model="form.password"
                            :placeholder="$t('sys.login.password')"
                            size="large"
                            class="h-[56px] text-[#fff] bg-[transparent] border-[#FFFFFF]"
                            allow-clear
                        >
                            <template #prefix><icon-lock /></template>
                        </a-input-password>
                    </a-form-item>
                    <!-- <div class="flex w-full justify-between">
                <div class="text-[#2C6DFF] text-[17px] cursor-pointer">没有账号，立即注册</div>
                <div class="text-[#666666] text-[17px] cursor-pointer">忘记密码？</div>
          </div> -->
                    <!-- <a-form-item
              v-if="!isDevelop"
              field="code"
              :hide-label="true"
              :rules="[{
              required: true,
              match: /^[a-zA-Z0-9]{4}$/,
              message: $t('sys.login.verifyCodeNotice')
            }]"
          >
            <a-input
                v-model="form.code"
                :placeholder="$t('sys.login.verifyCode')"
                size="large"
                allow-clear
            >
              <template #prefix><icon-safe /></template>
              <template #append>
                <verify-code ref="Verify" />
              </template>
            </a-input>
          </a-form-item> -->

                    <a-form-item :hide-label="true" class="mt-5">
                        <a-button
                            html-type="submit"
                            type="primary"
                            long
                            size="large"
                            :loading="loading"
                            style="background: #4780ff"
                            class="h-[56px]"
                        >
                            {{ $t('sys.login.loginBtn') }}
                        </a-button>
                    </a-form-item>

                    <!-- <a-divider orientation="center">{{ $t('sys.login.otherLoginType') }}</a-divider>
          <div class="flex w-3/4 pt-2 mx-auto items-stretch justify-around">
            <a-avatar class="other-login wechat"><icon-wechat /></a-avatar>
            <a-avatar class="other-login alipay"><icon-alipay-circle /></a-avatar>
            <a-avatar class="other-login qq"><icon-qq /></a-avatar>
            <a-avatar class="other-login weibo"><icon-weibo /></a-avatar>
          </div> -->
                </a-form>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
#background {
    background-image: url('@/assets/images/login_bg.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .content-login {
        width: 820px;
        // height: 800px;
        // background-image: url(@/assets/images/2222.png);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .text {
        color: white;
    }
}

::v-deep
    .arco-form-item-status-error
    .arco-input-wrapper:not(.arco-input-disabled),
.arco-form-item-status-error
    .arco-textarea-wrapper:not(.arco-textarea-disabled) {
    background: transparent;
    border-color: #fff;
}
::v-deep .arco-input-wrapper:hover {
    background: transparent;
    border-color: #fff;
}
::v-deep .arco-input-wrapper:focus-within,
.arco-input-wrapper.arco-input-focus {
    background: transparent;
}
</style>
